<template>
  <div class="zhiliang">
    <div class="zhiliangtitle">
      质量认证中心
    </div>
    <ZlCard1 />

    <el-row justify="space-between">
      <el-col :span="22">
        <div class="search_input">
          <el-row>
            <el-col :span="23">
              <input type="text" placeholder="请输入产品追溯码或证书编号">
            </el-col>
            <el-col :span="1">
              <svg t="1754186569947" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5151" width="40" height="60">
                <path
                  d="M450.540923 835.421849C238.095329 835.421849 65.258028 662.585911 65.258028 450.14713 65.258028 237.711074 238.095329 64.873772 450.540923 64.873772 662.986518 64.873772 835.830632 237.711074 835.830632 450.14713 835.830632 662.584548 662.986518 835.421849 450.540923 835.421849L450.540923 835.421849ZM450.540923 159.705847C290.384053 159.705847 160.09419 289.998435 160.09419 450.14713 160.09419 610.297187 290.384053 740.591138 450.540923 740.591138 610.696431 740.591138 740.99447 610.297187 740.99447 450.14713 740.99447 289.998435 610.696431 159.705847 450.540923 159.705847L450.540923 159.705847Z"
                  fill="#8a8a8a" p-id="5152"></path>
                <path
                  d="M900.538167 958.477626C885.598531 958.477626 870.668434 952.777836 859.268854 941.387795L657.978933 740.112862C635.189312 717.323242 635.189312 680.372035 657.978933 657.576963 680.77673 634.794156 717.722486 634.794156 740.518919 657.576963L941.807478 858.851896C964.598462 881.641517 964.598462 918.592724 941.807478 941.386432 930.407899 952.777836 915.477801 958.477626 900.538167 958.477626"
                  fill="#8a8a8a" p-id="5153"></path>
              </svg>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2">
        <button>查询</button>
      </el-col>
    </el-row>

    <ZlCard2 />
    <ZlCard3 />
    <ZlCard4 />
  </div>
</template>

<script>

import ZlCard1 from '@/components/ncpsy/zhiliang/ZlCard1.vue';
import ZlCard2 from '@/components/ncpsy/zhiliang/ZlCard2.vue';
import ZlCard3 from '@/components/ncpsy/zhiliang/ZlCard3.vue';
import ZlCard4 from '@/components/ncpsy/zhiliang/ZlCard4.vue';
export default {
  components: {
    ZlCard1,
    ZlCard2,
    ZlCard3,
    ZlCard4

  }
}
</script>

<style scoped>


.zhiliang {
  padding: 0 100px;
}

.zhiliangtitle {
  text-align: left;
  margin: 20px 0px;
  font-size: 40px;
  font-weight: 400;
}

input {
  width: 99%;
  height: 60px;
  border: none;
  font-size: 20px;
  padding-left: 20px;
}

input:focus {
  outline: none;
  /* 移除默认的outline */
  border: none;
  /* 移除或设置为透明 */
}

.search_input {
  height: 60px;
  overflow: hidden;
  border: 1px solid gray;
  border-radius: 10px;
}

button {
  margin-left: 20px;
  background-color: #2e7d32;
  border: none;
  border-radius: 10px;
  width: 120px;
  height: 60px;
  font-size: 25px;
  color: white;
}



</style>